<template>
	<!-- 告警 -->
	<div class="warningBox">
		<el-badge :value="alertNum.LEVEL_3" :max="99" class="item">
			<!-- v-loading.fullscreen.lock="fullscreenLoading"
      element-loading-spinner="none"
      element-loading-background="rgba(255,45,45,0.3)" -->
			<span class="el-dropdown-link" @click="handleCommand({ nodeType: 'alertlist', level: 3 })">
				<i class="el-icon-message-solid" :style="{ color: '#F56C6C' }"></i>
			</span>
		</el-badge>
		<el-badge :value="alertNum.LEVEL_2" :max="99" class="item" type="warning">
			<span class="el-dropdown-link" @click="handleCommand({ nodeType: 'alertlist', level: 2 })">
				<i class="el-icon-message-solid" :style="{ color: '#E6A23C' }"></i>
			</span>
		</el-badge>
	</div>
</template>
<script>
	import {
		fetchData,
		getFaultStatistics,
		putWhetherToAlert
	} from "@/api/index.js";
	import {
		notifyMe
	} from "@/utils/Notification.js"
	import bus from "common/bus";

	export default {
		data() {
			return {
				alertNum: {
					LEVEL_1: 0,
					LEVEL_2: 0,
					LEVEL_3: 0,
				},
				warninigDict: {
					dbalertlist: "数据库",
					osalertlist: "服务器",
				},
				postAlertcount: {
					opera: "alertcount",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				watchClick: "",
				fullscreenLoading: false,
				timerName: "FlashScreen",
				timerEventName: "timerFlashScreen",
				timerInterval: 1000 * 30,
				WhetherToAlert: false,
				isflushed: true,
			};
		},
		created() {

			this.restData();
			this.getData();

			bus.$on(this.timerEventName, (msg) => {
				this.openFullScreen();
			});
			bus.$on("timerWarning", (msg) => {
				if (msg.isGetData) {
					//避免闪屏 去除this.restData()
					// this.restData()
					this.getData();
				}
			});
		},
		mounted() {

		},
		updated() {
			this.isflushed = false
		},
		computed: {},
		methods: {
			handleCommand(command) {
				this.$router.push({
					name: "warningPanelBell",
					params: {
						nodeType: command.nodeType,
						level: command.level,
					},
				});
				bus.$emit("handCommand", command);
				// this.$message.warning("暂停服务")
			},
			getData() {
				// fetchData({
				//     postData : JSON.stringify(this.postAlertcount)
				// }).then(_=>console.log(_))
				getFaultStatistics()
					.then((res) => [
						
						...res["Mysql"],
						...res["Oracle"],
						...res["SQLServer"],
						...res["Network"],
						...res["OS"],
					])
					.then((res) => {
						let _alertNum = {
							LEVEL_1: 0,
							LEVEL_2: 0,
							LEVEL_3: 0
						};

						res.forEach((element) => {
							if (element.alertLevel == 2) {
								_alertNum.LEVEL_2 += 1;
							} else if (element.alertLevel == 3) {
								_alertNum.LEVEL_3 += 1;
							} else {
								_alertNum.LEVEL_1 += 1;
							}
						});

						if (JSON.stringify(this.alertNum) != JSON.stringify(_alertNum)) {
							this.alertNum = {
								..._alertNum
							};
							this.$store.commit("updateAlertNum", {
								alertNum: this.alertNum
							});
						} else {
							return;
						}
					});
			},
			restData() {
				this.alertNum = {
					LEVEL_1: 0,
					LEVEL_2: 0,
					LEVEL_3: 0,
				};
			},
			warninigDictFn(prop) {
				return this.warninigDict[prop];
			},
			openFullScreen() {
				// this.fullscreenLoading = true;
				// setTimeout(() => {
				//   this.fullscreenLoading = false;
				// }, 3000);
				notifyMe()
			},
		},
		watch: {
			"alertNum.LEVEL_3": function(val, oldVal) {

				//   if (val > 0) {
				//     // this.openFullScreen();
				//     // console.log("warning");
				//     bus.$emit("timerNewTodo", {
				//       name: this.timerName,
				//       eventName: this.timerEventName,
				//       interval: this.timerInterval,
				//       intervalNow: 0,
				//     });
				//   } else {
				//     bus.$emit("timerNewTodo", {
				//     name: this.timerName,
				// });
				//   }
				if (localStorage.getItem('Monitor_alarm_status') == 'true' || localStorage.getItem(
						'Monitor_alarm_status') == true) {
					this.WhetherToAlert = true
				} else {
					this.WhetherToAlert = false
				}

				if (this.WhetherToAlert && !this.isflushed) {

					putWhetherToAlert({
						state: this.WhetherToAlert
					}).then(res => {
						if (res === 0) {
							this.$message.success('告警推送 失败')
						} else {
							this.$message.error('告警推送 成功')
						}
					})
				}
			},
		},
	};
</script>
<style scoped>
	.sj-warning {
		font-size: 24px;
		margin-top: -10px;
	}

	.el-dropdown-link {
		color: #fff;
		cursor: pointer;
	}

	.btn-bell,
	.sj-warning {
		position: relative;
		width: 30px;
		height: 30px;
		text-align: center;
		border-radius: 15px;
		cursor: pointer;
	}

	.item {
		margin-top: 10px;
		margin-right: 18px;
		/* border: 1px solid green; */
	}

	.warningBox {
		margin-top: 10px;
		/* border: 1px solid red; */
	}
</style>
